<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-12 11:23:25
 -->
<template>
  <div>
    <div class="clearfix">
      <h3 class="fl">多单位</h3>
      <el-button class="fr" type="text" @click="btnSetupUnit">单位设置</el-button>
    </div>
    <el-divider />
    <!-- {{ dataObj }} -->
    <el-form
      ref="goodUnit"
      :model="dataObj"
      :label-position="'right'"
      :rules="ruleValidator"
      label-width="90px"
      size="small"
      class="w600 margin-t20"
    >
      <el-form-item label="基本单位:" prop="baseUnit">
        <el-select
          v-model="dataObj.baseUnit"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionsData.unit"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <div v-for="(spObj, index) in viceUnit" :key="`${index}`">
        <el-form-item :label="`副单位 ${index+1}:`">
          <el-select
            v-model="spObj.value"
            allow-create
            filterable
            default-first-option
            placeholder="请选择"
            @change="(e) => {onSelectViceChange(index, e)}"
          >
            <el-option
              v-for="item in optionsData.unit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span>=</span>
          <el-input-number
            v-model="spObj.info.num"
            style="width:100px"
            :min="0"
            placeholder="换算倍数"
          /> {{ baseUnitLabel }}
          <el-button type="danger" icon="el-icon-delete" circle @click="(e) => { btnDelUnit(e, index) }" />
        </el-form-item>
      </div>
      <el-button type="primary" @click="btnAddUnit">增加单位</el-button>
      <el-checkbox v-model="multi.unit" border>多单位支持</el-checkbox>
    </el-form>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { list } from '@/api/goods/unit.js'

export default {
  name: 'GoodUnit',
  mixins: [oftenuse],
  props: {
    multi: {
      type: Object,
      default: () => { return null }
    }
  },
  data() {
    return {
      ruleValidator: {
        baseUnit: [{ required: true, message: '请选择基本单位', trigger: 'blur' }]
      },
      viceUnit: [],
      optionsData: {
        unit: []
      }
    }
  },
  computed: {
    baseUnitLabel: function() {
      const optionsData = this.optionsData.unit
      const value = this.dataObj.baseUnit
      return this.getLabelByValue(optionsData, value)
    }
  },
  watch: {
    'dataObj.baseUnit': {
      handler(val) {
        const baseValue = val
        const label = this.getLabelByValue(this.optionsData.unit, baseValue)
        this.viceUnit.forEach(item => {
          this.$set(item.info, 'value', baseValue)
          this.$set(item.info, 'label', label)
        })
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnAddUnit() {
      if (!this.dataObj.baseUnit) return this.$message.error('请先选择基本单位！')
      const tempObj = { value: null, label: null, info: { value: null, label: null, num: null }}
      const baseUnitObj = {
        value: this.dataObj.baseUnit,
        label: this.getLabelByValue(this.optionsData.unit, this.dataObj.baseUnit)
      }
      tempObj.info = Object.assign(tempObj.info, baseUnitObj)
      this.viceUnit.push(tempObj)
    },
    btnDelUnit(e, index) {
      this.$delete(this.viceUnit, index)
    },
    btnSetupUnit() {
      this.$router.push({ name: 'unitManager' })
    },
    // api
    getGoodUnitData() {
      const baseUnitvalue = this.dataObj.baseUnit
      if (!baseUnitvalue) return []
      const baseUnit = this.getOptionsObjByValue(this.optionsData.unit, baseUnitvalue) || {}
      if (baseUnit) baseUnit.default = true // 默认, 基础单位
      const result = [baseUnit, ...this.viceUnit]
      return result
    },
    getLabelByValue(optionsData, value) {
      const resultArr = optionsData.filter(item => { return item.value === value })
      if (!resultArr.length) return null
      return resultArr[0].label
    },
    getOptionsObjByValue(optionsData, value) {
      const resultArr = optionsData.filter(item => { return item.value === value })
      if (!resultArr.length) return null
      return resultArr[0]
    },
    initData() {
      const pageInfo = this.pageInfo
      list({ data: {}, pageInfo }).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          data.forEach(item => {
            item.value = item.id
            item.label = item.name
          })
          this.$set(this.optionsData, 'unit', data)
        }
      })
    },
    // on
    onSelectViceChange(index, value) {
      const optionsData = this.optionsData.unit
      const label = this.getLabelByValue(optionsData, value)
      this.$set(this.viceUnit[index], 'label', label)
    }
  }
}
</script>
<style lang="scss" scoped>
.select-new{
 position: absolute;
 bottom: 0; text-align: center; background: #ffffff; padding: 5px;
 border: #cccccc 1px solid; width: 100%
}
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>

